<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        border:solid 1px red;
        height: 400px;
        width: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        line-height: 400px;
        text-align: center;

    }
</style>
<script>
    window.onload = function(){
        let btnStart = document.getElementById("btnStart");
        let btnStop  = document.getElementById("btnStop");
        let infoNum  = document.getElementById("infoNum");
        let progress = document.getElementById("progress");
        let timer = null;

        infoNum.innerText = "0%";
        progress.value = 0;
        btnStart.onclick = function(){
            timer = setInterval(function(){
                let progressValue = progress.value;
                progressValue ++;
                if(progressValue>100){
                    clearInterval(timer);
                }else{
                    infoNum.innerText = progressValue +"%";
                    progress.value = progressValue;
                }
            },100);
        }
        btnStop.onclick = function(){
            clearInterval(timer);
        }
    }
</script>
<body>
    <button id="btnStart">开始</button>
    <button id="btnStop">停止</button>
    <div id="box">
        当前进度：<span id="infoNum">20%</span>
        <progress value="20" max="100" min="0" id="progress"></progress>
    </div>
</body>
</html>